import { computed, defineComponent, ref } from 'vue';
import Customized from './Customized.vue';
import Default from './Default.vue';
import MultipleGroups from './MultipleGroups.vue';
import ShowAndChange from './ShowAndChange.vue';
import WithBox from './WithBox.vue';
import WithMessage from './WithMessage.vue';
import WithMessageSanitized from './WithMessageSanitized.vue';

export default defineComponent({
  name: 'App',
  props: {},
  emits: [],

  setup(props, { attrs, emit, expose, slots }) {
    expose({});

    return () => {
      return (
        <div class='block'>
          <div class='block-'>
            <h5 class='title'>Customized</h5>
            <Customized />
          </div>
          <div class='block-'>
            <h5 class='title'>Default</h5>
            <Default />
          </div>
          <div class='block-'>
            <h5 class='title'>MultipleGroups</h5>
            <MultipleGroups />
          </div>
          <div class='block-'>
            <h5 class='title'>ShowAndChange</h5>
            <ShowAndChange />
          </div>
          <div class='block-'>
            <h5 class='title'>WithBox</h5>
            <WithBox />
          </div>
          <div class='block-'>
            <h5 class='title'>WithMessage</h5>
            <WithMessage />
          </div>
          <div class='block-'>
            <h5 class='title'>WithMessageSanitized</h5>
            <WithMessageSanitized />
          </div>
        </div>
      );
    };
  },
});
